/* ===== Сброс и базовые стили ===== */
:root {
    --morph-font: 'Segoe UI', system-ui, sans-serif;
    --morph-bg: #1a1a1a;
    /* Тёмный фон по умолчанию */
	--morph-z-index: 10;
    --morph-text: #ffffff;
    --morph-primary: #6200ee;
    --morph-secondary: #03dac6;
    --morph-border-radius: 8px;
    --morph-transition: 0.3s ease;
	--morph-top: 0;
	--morph-left: 0;
	--morph-position:fixed;
	--morph-width: 100%;
	--morph-height:100%;
	--morph-no-active-opacity: 0;
	--morph-active-opacity: 1;
	--morph-no-active-enable: none;
	--morph-active-enable: all;
}

/* ===== Каждый morph — это полноэкранная страница ===== */
morph {
    display: block;
    position: var(--morph-position);
    top: var(--morph-top);
    left: var(--morph-left);
    width: var(--morph-width);
    height: var(--morph-height);
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--morph-bg);
    color: var(--morph-text);
    font-family: var(--morph-font);
    z-index: var(--morph-z-index);
    opacity: var(--morph-no-active-opacity);
    pointer-events: var(--morph-no-active-enable);
    transition: opacity 0.5s var(--morph-transition);
}

/* Активный morph (текущая "страница") */
morph[active] {
    opacity: var(--morph-active-opacity);
    pointer-events: var(--morph-active-enable);
}

/* ===== Стилизация ВСЕХ элементов ===== */
/* 1. Формы */
morph input,
morph button,
morph select,
morph textarea,
morph [role="button"],
morph a[role="button"] {
    font-family: var(--morph-font);
    transition: var(--morph-transition);
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: var(--morph-border-radius);
    box-sizing: border-box;
    font-size: 1rem;
}

morph input:not([type="submit"]):not([type="button"]), morph textarea{
    background: var(--morph-bg);
    color: var(--morph-bg);
    border: var(--morph-text) 1px solid;
	color:var(--morph-fg);
}

morph input:not([type="submit"]):not([type="button"]):focus, morph textarea:focus {
    outline: var(--morph-primary) 3px solid;
	border-color:transparent;
}

/* 2. Чекбоксы и радио-кнопки */
morph input[type="checkbox"],
morph input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
}

/* 3. Таблицы */
morph table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

morph th,
morph td {
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

morph th {
    background: rgba(255, 255, 255, 0.1);
}

/* 4. Кнопки */
morph button,
morph [role="button"],
morph a[role="button"], morph input[type="submit"], morph input[type="button"] {
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    background: var(--morph-primary);
    color: white;
}

/* 5. Анимации */
@keyframes morph-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

morph>* {
    animation: morph-fade-in 0.5s var(--morph-transition);
}
